<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="{{STATIC_URL}}css/flat-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="{{STATIC_URL}}images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">

      <div class="row">
        <div class="span6">
          <div class="row demo-navigation">
            <div class="span7">
              <div class="btn-toolbar">
                <img class="logo" src="{{STATIC_URL}}images/logo.png">
                <div class="btn-group">
                  <a class="btn btn-info active" href="#"><i class="fui-cmd-16"></i></a>
                  <a class="btn btn-info" href="add"><i class="fui-plus-16"></i></a>
                  <a class="btn btn-info" href="update"><i class="fui-new-16"></i></a>
                  <a class="btn btn-info" href="delete"><i class="fui-cross-16"></i></a>
                  <a class="btn btn-info" href="settings"><i class="fui-settings-16"></i></a>

                  <div style="display: inline-table; margin:0" class="navbar btn btn-info navbar-inverse">
                    <ul class="nav" style="margin:0 !important">
                      <li>
                        <i class="fui-man-16"></i> <span>{% if user.first_name %} {{user.first_name}} {%else%}{{user.username}}{%endif%}</span>
                        <ul>
                          <li><a href="/account">Account</a></li>
                          <li><a href="/logout">Logout</a></li>
                          <li><a href="/about">About SQFlight</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!--/.nav-collapse -->

                </div>
              </div> <!-- /toolbar -->
            </div>
          </div> <!-- /demo-navigation -->
        </div>
      </div>

      <div class="row demo-tiles">
        <div class="span6">
          <h3>
            <img  class="icon-little" src="{{STATIC_URL}}images/illustrations/time.png">
            <span>Database Stats</span>
          </h3>
          <div class="tile">
          <div class="todo mrm">
            <ul>
              <li class="todo">
                <div class="todo-icon fui-menu-24"></div>
                <div class="todo-content">
                  <h4 class="todo-name">
                    <strong>Databases</strong>
                  </h4>
                  {{databases}}
                </div>
              </li>

              <li>
                <div class="todo-icon fui-calendar-24"></div>
                <div class="todo-content">
                  <h4 class="todo-name">
                    <strong>Tables</strong>
                  </h4>
                  {{tables}}
                </div>
              </li>

              <li>
                <div class="todo-icon fui-eye-24"></div>
                <div class="todo-content">
                  <h4 class="todo-name">
                    <strong>Constraints</strong>
                  </h4>
                  0{{constraints}}
                </div>
              </li>

              <li>
                <div class="todo-icon fui-time-24"></div>
                <div class="todo-content">
                  <h4 class="todo-name">
                    <strong>Views</strong>
                  </h4>
                  {{views}}
                </div>
              </li>
            </ul>
          </div>
          </div>
        </div>
        <div class="span6">

          <h3>
            <img  class="icon-little" src="{{STATIC_URL}}images/illustrations/compass.png">
            <span>Current Settings</span>
          </h3>
          <div class="tile">
            <h3 class="tile-title">Color Swatches</h3>
            <p>Easy to add or change elements. </p>
            <a class="btn btn-primary btn-large btn-block" href="#">Get Pro</a>
          </div>
        </div>
      </div> <!-- /tiles -->

    </div> <!-- /container -->

    <footer>
      <div class="container">
        <div class="row">
          <div class="span7">
            <h3 class="footer-title">SQFlight is distributed under GPL v3 License</h3>
          </div> <!-- /span8 -->

          <div class="span5">
            <div class="footer-banner">
              <h3 class="footer-title"><img class="logo2" src="{{STATIC_URL}}images/logo2.png"> SQLite Administrator</h3>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!--[if lt IE 8]>
      <script src="js/icon-font-ie7.js"></script>
      <script src="js/icon-font-ie7-24.js"></script>
    <![endif]-->
  </body>
</html>
